<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: homePath }">设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>PMS设备数据 - {{name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="searchForm">
        <el-row :gutter="20"
                class="topLayout"
                type="flex"
                justify="start">
          <div class="inline">
            <el-button class="firstBtn"
                       :class="index == 0 ? 'selected' : ''"
                       type="default"
                       @click="changeTab(0)"
                       size="mini">近一天</el-button>
            <el-button type="default"
                       :class="index == 1 ? 'selected' : ''"
                       @click="changeTab(1)"
                       size="mini">近一周</el-button>
            <el-button class="lastBtn"
                       :class="index == 2 ? 'selected' : ''"
                       type="default"
                       @click="changeTab(2)"
                       size="mini">近一月</el-button>
          </div>
          <div class="inline"
               style="min-width:210px">
            <el-form-item label="开始日期"
                          style="width:100%">
              <el-date-picker :picker-options="pickerDateBegin"
                              class="datePicker"
                              size="mini"
                              v-model="searchForm.start"
                              type="date"
                              value-format="timestamp"
                              placeholder="开始日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="inline"
               style="min-width:210px">
            <el-form-item label="结束日期"
                          style="width:100%">
              <el-date-picker :picker-options="pickerDateEnd"
                              class="datePicker"
                              size="mini"
                              v-model="searchForm.end"
                              type="date"
                              value-format="timestamp"
                              placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="inline">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="m-l"
                       @click="getDeviceData()"
                       size="mini">搜索</el-button>
          </div>
        </el-row>
      </el-form>
    </el-card>
    <!--  设备数据表格  -->
    <div>
      <el-card class="m-t">
        <el-row>
          <el-col :span="12">
            <three-line-chart :chart-data="voltageChartData"
                              head-title="电压"
                              :chart-time="voltageTimeData"
                              :y-max="number(400)"
                              :interval="number(100)"
                              unit="V" />
          </el-col>
          <el-col :span="12"
                  style="text-align: end">
            <three-line-chart :chart-data="ampereChartData"
                              head-title="电流"
                              :chart-time="ampereTimeData"
                              :y-max="number(100)"
                              :interval="number(20)"
                              unit="A" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t">
        <el-row>
          <el-col :span="12">
            <three-line-chart :chart-data="powerChartData"
                              :chart-time="powerTimeData"
                              head-title="有功功率"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kW" />
          </el-col>
          <el-col :span="12"
                  style="text-align: end">
            <total-line-chart :chart-data="powerChartTotalData"
                              :chart-time="powerTimeData"
                              head-title="总有功功率"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kW" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t">
        <el-row>
          <el-col :span="12"
                  style="text-align: end">
            <three-line-chart :chart-data="wattChartData"
                              :chart-time="wattTimeData"
                              head-title="能耗"
                              :y-max="number(800)"
                              :interval="number(100)"
                              unit="kW·h" />
          </el-col>
          <el-col :span="12"
                  style="text-align: end">
            <total-line-chart :chart-data="wattChartTotalData"
                              :chart-time="wattTimeData"
                              head-title="总能耗"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kW·h" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t" v-if="noPowerChartTotalData.length>0">
        <el-row>
          <el-col :span="12">
            <three-line-chart :chart-data="noPowerChartData"
                              :chart-time="noPowerTimeData"
                              head-title="无功功率"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kVar" />
          </el-col>
          <el-col :span="12" style="text-align: end">
            <total-line-chart :chart-data="noPowerChartTotalData"
                              :chart-time="noPowerTimeData"
                              head-title="总无功功率"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kVar" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t" v-if="powerFactorChartTotalData.length>0">
        <el-row>
          <el-col :span="12">
            <three-line-chart :chart-data="powerFactorChartData"
                              :chart-time="powerFactorTimeData"
                              head-title="功率因数"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="" />
          </el-col>
          <el-col :span="12" style="text-align: end">
            <total-line-chart :chart-data="powerFactorChartTotalData"
                              :chart-time="powerFactorTimeData"
                              head-title="总功率因数"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t" v-if="carbonEmissionsChartData.length>0">
        <el-row>
          <el-col :span="12">
            <total-line-chart :chart-data="carbonEmissionsChartData"
                              :chart-time="carbonEmissionsTimeData"
                              head-title="碳排放量"
                              :y-max="number(60)"
                              :interval="number(10)"
                              unit="kgCO₂" />
          </el-col>
          <el-col :span="12"
                  style="text-align: end">
          </el-col>
        </el-row>
      </el-card>
      <el-card class="m-t">
        <histogram :chart-data="HChartData"
                   :chart-time="HTimeData"
                   head-title="设备在线率"
                   min="0"
                   max="100"
                   :interval="number(5)"
                   :name="name" />
      </el-card>
      <el-card class="m-t">
        <el-row>
          <!--   设备数据表格上方操作按钮   -->
          <el-row>
            <el-button type="default" size="mini" icon="el-icon-download" @click="downloadData()">下载数据</el-button>
            <el-button type="default" size="mini" icon="el-icon-s-data" @click="adjust()">数据校准</el-button>
          </el-row>
          <el-table ref="multipleTable"
                    :data="tableData"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="index"
                             label="编号"
                             min-width="60"
                             align="center"/>
            <el-table-column prop="ts"
                             label="日期"
                             :formatter="dateFormat"
                             min-width="150"
                             sortable />
            <el-table-column prop="val.VOLTAGE_A"
                             label="A相电压(V)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.VOLTAGE_A.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.VOLTAGE_B"
                             label="B相电压(V)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.VOLTAGE_B.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.VOLTAGE_C"
                             label="C相电压(V)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.VOLTAGE_C.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.AMPERE_A"
                             label="A相电流(A)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.AMPERE_A.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.AMPERE_B"
                             label="B相电流(A)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.AMPERE_B.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.AMPERE_C"
                             label="C相电流(A)"
                             min-width="120"
                             sortable>
              <template scope="{row}">
                {{row.val.AMPERE_C.toFixed(1)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.POWER_A"
                             label="A相有功功率(kW)"
                             min-width="156"
                             sortable>
              <template scope="{row}">
                {{row.val.POWER_A.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.POWER_B"
                             label="B相有功功率(kW)"
                             min-width="156"
                             sortable>
              <template scope="{row}">
                {{row.val.POWER_B.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.POWER_C"
                             label="C相有功功率(kW)"
                             min-width="156"
                             sortable>
              <template scope="{row}">
                {{row.val.POWER_C.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.POWER"
                             label="总有功功率(kW)"
                             min-width="146"
                             sortable>
              <template scope="{row}">
                {{row.val.POWER.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.WATT_A"
                             label="A相能耗(kW·h)"
                             min-width="140"
                             sortable>
              <template scope="{row}">
                {{row.val.WATT_A.toFixed(3)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.WATT_B"
                             label="B相能耗(kW·h)"
                             min-width="140"
                             sortable>
              <template scope="{row}">
                {{(row.val.WATT_B).toFixed(3)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.WATT_C"
                             label="C相能耗(kW·h)"
                             min-width="140"
                             sortable>
              <template scope="{row}">
                {{row.val.WATT_C.toFixed(3)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.WATT"
                             label="总能耗(kW·h)"
                             min-width="135"
                             sortable>
              <template scope="{row}">
                {{row.val.WATT.toFixed(3)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.QA"
                             label="A相无功功率(kVar)"
                             min-width="164"
                             v-if="noPowerChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.QA.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.QB"
                             label="B相无功功率(kVar)"
                             min-width="164"
                             v-if="noPowerChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.QB.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.QC"
                             label="C相无功功率(kVar)"
                             min-width="164"
                             v-if="noPowerChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.QC.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.Q"
                             label="总无功功率(kVar)"
                             min-width="154"
                             v-if="noPowerChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.Q.toFixed(3)/1000}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CA"
                             label="A相功率因数"
                             min-width="130"
                             v-if="powerFactorChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.CA.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CB"
                             label="B相功率因数"
                             min-width="130"
                             v-if="powerFactorChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.CB.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CC"
                             label="C相功率因数"
                             min-width="130"
                             v-if="powerFactorChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.CC.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.C"
                             label="总功率因数"
                             min-width="130"
                             v-if="powerFactorChartTotalData.length>0"
                             sortable>
              <template scope="{row}">
                {{row.val.C.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CE"
                             label="碳排放量(kgCO₂)"
                             min-width="154"
                             v-if="carbonEmissionsChartData.length>0"
                             sortable>
              <template scope="{row}">
                {{Number(row.val.CE)?row.val.CE.toFixed(3):''}}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <download :show-dialog="downloadShowDialog" @downloadVisible="downloadVisible" />
    <adjust :show-dialog="adjustShowDialog" :showNoPower="noPowerChartTotalData.length>0?true:false" :showPowerFactor="powerFactorChartTotalData.length>0?true:false" :showCarbonEmissions="carbonEmissionsChartData.length>0?true:false" @adjustVisible="adjustVisible" @getDeviceData="getDeviceData"/>
  </div>
</template>

<script>
  import ThreeLineChart from "./chart/ThreeLineChart";
  import TotalLineChart from "./chart/TotalLineChart";
  import Histogram from "./chart/Histogram";
  import download from "@/views/deviceManage/components/download";
  import adjust from "@/views/deviceManage/components/pmsAdjust";
  import { getData, getFull, online } from "@/api/deviceManage";
  import { formatDate } from "@/utils/utils";

  export default {
    name: "PMSViewData",
    components: {
      ThreeLineChart,
      TotalLineChart,
      Histogram,
      download,
      adjust
    },
    data() {
      return {
        deviceId: "",
        name: "",
        index: 0,
        downloadShowDialog: false,
        adjustShowDialog: false,
        tableData: [],
        voltageChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        voltageTimeData: [],
        ampereChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        ampereTimeData: [],
        powerChartTotalData: [],
        powerChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        powerTimeData: [],

        wattChartTotalData: [],
        wattChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        wattTimeData: [],

        noPowerChartTotalData: [],
        noPowerChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        noPowerTimeData: [],

        powerFactorChartTotalData: [],
        powerFactorChartData: {
          chartDataA: [],
          chartDataB: [],
          chartDataC: []
        },
        powerFactorTimeData: [],

        carbonEmissionsChartData: [],
        carbonEmissionsTimeData: [],

        HChartData: [],
        HTimeData: [],
        multipleSelection: [],
        searchTime: [],
        searchForm: {
          start: "",
          end: ""
        },
        homePath: "/deviceManage",
        pickerDateBegin: {
          disabledDate: (time) => {
            let endDateVal = new Date(this.searchForm.end);
            if (endDateVal) {
              return time.getTime() > endDateVal - 3600 * 1000 * 24 || time.getTime() < endDateVal - 3600 * 1000 * 24 * 30;
            } else {
              return time.getTime() > new Date().getTime() - 8.64e7;
            }
          }
        },
        pickerDateEnd: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      };
    },
    created() {
      this.deviceId = this.$route.query.deviceId;
      this.name = this.$route.query.name;
      this.page = this.$route.query.page;
      this.search = this.$route.query.search;
      let platformId = this.$route.query.platformId;
      if (platformId) {
        this.homePath = ``;
      } else {
        this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`;
      }
    },
    mounted() {
      this.changeTab(0);
    },
    methods: {
      dateFormat(row) {
        return formatDate(new Date(row.ts));
      },
      rounding(row, column) {
        return parseFloat(row[column.property]).toFixed(2)
      },
      datePickerChange(time) {
        this.searchForm.start = time[0].getTime();
        this.searchForm.end = time[1].getTime();
      },
      downloadData() {
        this.downloadVisible(true);
        /*window.open(
          process.env.VUE_APP_BASE_IBEM_API +
            `/v2/device/data/import/download.csv?deviceId=` +
            this.deviceId +
            "&start=" +
            this.searchForm.start +
            "&end=" +
            this.searchForm.end
        );*/
      },
      adjust() {
        this.adjustVisible(true);
      },
      getDeviceData() {
        const that = this;
        //表格
        let data = {
          deviceId: this.deviceId,
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getFull(data).then(res => {
          const data = res.value;
          this.tableData = data.data;
        });
        // 电压A
        let voltageDataA = {
          deviceId: this.deviceId,
          type: "VOLTAGE_A",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(voltageDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { xData, yData } = result;
            that.voltageChartData.chartDataA = yData;
            that.voltageTimeData = xData;
          });
        });
        // 电压B
        let voltageDataB = {
          deviceId: this.deviceId,
          type: "VOLTAGE_B",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(voltageDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { yData } = result;
            that.voltageChartData.chartDataB = yData;
          });
        });
        // 电压C
        let voltageDataC = {
          deviceId: this.deviceId,
          type: "VOLTAGE_C",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(voltageDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { yData } = result;
            that.voltageChartData.chartDataC = yData;
          });
        });
        // 电流A
        let ampereDataA = {
          deviceId: this.deviceId,
          type: "AMPERE_A",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(ampereDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { xData, yData } = result;
            that.ampereChartData.chartDataA = yData;
            that.ampereTimeData = xData;
          });
        });
        // 电流B
        let ampereDataB = {
          deviceId: this.deviceId,
          type: "AMPERE_B",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(ampereDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { yData } = result;
            that.ampereChartData.chartDataB = yData;
          });
        });
        // 电流C
        let ampereDataC = {
          deviceId: this.deviceId,
          type: "AMPERE_C",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(ampereDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { yData } = result;
            that.ampereChartData.chartDataC = yData;
          });
        });
        // A相有功功率
        let powerDataA = {
          deviceId: this.deviceId,
          type: "POWER_A",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { xData, yData } = result;
            that.powerChartData.chartDataA = yData.map(function (str) {
              return (str / 1000);
            });
            that.powerTimeData = xData;
          });
        });
        // B相有功功率
        let powerDataB = {
          deviceId: this.deviceId,
          type: "POWER_B",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerChartData.chartDataB = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });
        // C相有功功率
        let powerDataC = {
          deviceId: this.deviceId,
          type: "POWER_C",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerChartData.chartDataC = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });
        // 总相有功功率
        let powerDataTotal = {
          deviceId: this.deviceId,
          type: "POWER",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerDataTotal).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerChartTotalData = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });
        // 能耗A
        let wattDataA = {
          deviceId: this.deviceId,
          type: "WATT_A",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(wattDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { xData, yData } = result;
            that.wattChartData.chartDataA = yData;
            that.wattTimeData = xData;
          });
        });
        // 能耗B
        let wattDataB = {
          deviceId: this.deviceId,
          type: "WATT_B",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(wattDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.wattChartData.chartDataB = yData;
          });
        });
        // 能耗C
        let wattDataC = {
          deviceId: this.deviceId,
          type: "WATT_C",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(wattDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.wattChartData.chartDataC = yData;
          });
        });
        // 总能耗
        let wattData = {
          deviceId: this.deviceId,
          type: "WATT",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(wattData).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.wattChartTotalData = yData;
          });
        });

        // A相无功功率
        let noPowerDataA = {
          deviceId: this.deviceId,
          type: "QA",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(noPowerDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { xData, yData } = result;
            that.noPowerChartData.chartDataA = yData.map(function (str) {
              return (str / 1000);
            });
            that.noPowerTimeData = xData;
          });
        });
        // B相无功功率
        let noPowerDataB = {
          deviceId: this.deviceId,
          type: "QB",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(noPowerDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.noPowerChartData.chartDataB = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });
        // C相无功功率
        let noPowerDataC = {
          deviceId: this.deviceId,
          type: "QC",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(noPowerDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.noPowerChartData.chartDataC = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });
        // 总无功功率
        let noPowerDataTotal = {
          deviceId: this.deviceId,
          type: "Q",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(noPowerDataTotal).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.noPowerChartTotalData = yData.map(function (str) {
              return (str / 1000);
            });
          });
        });

        // A相功率因素
        let powerFactorDataA = {
          deviceId: this.deviceId,
          type: "CA",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerFactorDataA).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { xData, yData } = result;
            that.powerFactorChartData.chartDataA = yData;
            that.powerFactorTimeData = xData;
          });
        });
        // B相功率因素
        let powerFactorDataB = {
          deviceId: this.deviceId,
          type: "CB",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerFactorDataB).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerFactorChartData.chartDataB = yData;
          });
        });
        // C相功率因素
        let powerFactorDataC = {
          deviceId: this.deviceId,
          type: "CC",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerFactorDataC).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerFactorChartData.chartDataC = yData;
          });
        });
        // 总功率因素
        let powerFactorData = {
          deviceId: this.deviceId,
          type: "C",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(powerFactorData).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { yData } = result;
            that.powerFactorChartTotalData = yData;
          });
        });

        //碳排放量
        let carbonEmissionsData = {
          deviceId: this.deviceId,
          type: "CE",
          start: this.searchForm.start,
          end: this.searchForm.end
        };
        getData(carbonEmissionsData).then(res => {
          let data = res.value;
          that.handleData(data.data, 3).then(result => {
            let { xData, yData } = result;
            that.carbonEmissionsChartData = yData;
            that.carbonEmissionsTimeData = xData;
          });
        })

        //在线率
        let onLineData = {
          deviceId: this.deviceId,
          start: new Date().getTime() - 3600 * 1000 * 24 * 6,
          end: this.searchForm.end
        };
        online(onLineData).then(res => {
          let data = res.value;
          that.handleData(data.data, 1).then(result => {
            let { xData, yData } = result;
            that.HChartData = yData;
            that.HTimeData = xData;
          });
        });
      },
      handleData(data, scale) {
        return new Promise((resolve, reject) => {
          let xData = [];
          let yData = [];
          for (let i = 0; i < data.length; i++) {
            data[i].ts = formatDate(new Date(data[i].ts));
            if (data[i].val) {
              data[i].val = Number(data[i].val.toFixed(scale));
            } else {
              data[i].val = 0;
            }
            xData.push(data[i].ts.substring(5, 16));
            yData.push(data[i].val);
          }
          resolve({ xData, yData });
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      number(val) {
        return Number(val);
      },
      changeTab(num) {
        this.index = num;
        this.searchForm.end = new Date().getTime();
        if (num == 0) {
          this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24;
        } else if (num == 1) {
          this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 7;
        } else {
          this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 30;
        }
        this.searchTime = [];
        this.getDeviceData();
      },
      downloadVisible(e) {
        this.downloadShowDialog = e;
      },
      adjustVisible(e) {
        this.adjustShowDialog = e;
      }
    }
  };
</script>
<style>
  .topLayout .el-form-item {
    margin-bottom: 0px;
  }
  .flex-box .el-form-item {
    margin-bottom: 0px;
  }
</style>
<style scoped>
  .header {
    /* margin: 20px; */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }

  .topLayout {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .btnGroup {
    width: 300px;
    display: flex;
    flex-wrap: nowrap;
  }

  .firstBtn {
    border-radius: 20px 0 0 20px;
  }

  .lastBtn {
    border-radius: 0 20px 20px 0;
  }

  .btnGroup .el-button {
    margin-left: 2px;
  }

  .inline {
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .flex-box {
    align-items: center;
  }

  .timeCase {
    max-width: 300px;
  }

  .selected {
    background-color: #1890ff;
    color: #fff;
  }

  .datePicker {
    width: 140px;
  }
</style>
